<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写收货地址</title>
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

    <!--头部和收货地址-->
    <style>
        div.buyPageDiv{
            margin: 20px auto;
            max-width: 1013px;
        }
        div.address{
            margin: 20px 5px;
            text-align: left;
        }
        div.addressTip, div.productListTip{
            color: #333333;
            font-size: 16px;
            font-weight: bold;
            text-align: left;
            margin-bottom: 30px;
        }
        table.addressTable{
            margin: 20px 20px;
            width: 600px;
            font-size:12px;
        }
        table.addressTable td{
            color: #333333;
            text-align: right;
            vertical-align: top;
            padding-right: 5px;
            text-align: left;
            height: 30px;
        }
        table.addressTable td.firstColumn{
            width: 100px;
        }
        table.addressTable td textarea{
            border: 1px solid #AFAFAF;
            margin-bottom: 10px;
            width: 400px;
        }
        table.addressTable td input{
            border: 1px solid #AFAFAF;
            width: 200px;
        }
        span.redStar{
            color: red;
            font-size: 8px;
        }
    </style>

    <!--确认订单信息-->
    <style>
        div.buyPageDiv{
            margin: 20px auto;
            max-width: 1013px;
        }
        div.addressTip, div.productListTip{
            color: #333333;
            font-size: 16px;
            font-weight: bold;
            text-align: left;
            margin-bottom: 30px;
        }
        table.productListTable{
            width: 100%;
            border-collapse: separate;
            font-size:12px;
        }
        table.productListTable th{
            color: #999999;
            font-family: 宋体;
            font-weight: normal;
            font-size: 12px;
            text-align: center;
            padding-bottom: 5px;
        }
        table.productListTable tr.rowborder td{
            background-color: #b2d1ff;
            border-right: 2px solid #fff;
            height: 3px;
        }
        th.productListTableFirstColumn{
            text-align: left !important;
        }
        img.tmallbuy{
            width: 15px;
        }
        a.marketLink{
            color: black;
            font-size: 12px;
            font-family: 宋体;
            font-weight: normal;
        }
        a.marketLink:hover{
            color: black;
            font-size: 12px;
            text-decoration: underline;
            font-family: 宋体;
            font-weight: normal;
        }
        span.wangwangGif{
            display: inline-block;
            width: 25px;
            height: 25px;
            background-image:url(http://how2j.cn/tmall/img/site/wangwang.gif);
            background-repeat: no-repeat;
            background-color: transparent;
            background-attachment: scroll;
            background-position: -83px -0px;
            position: relative;
            top: 8px;
            left: 2px;
        }
        tbody.productListTableTbody td{
            text-align: center;
        }
        tbody.productListTableTbody td.orderItemFirstTD{
            text-align: left;
        }
        tr.orderItemTR td{
            border-bottom: 1px solid #E5E5E5;
        }
        tr.orderItemTR td{
            padding: 10px 0px;
        }
        img.orderItemImg{
            width: 50px;
            height: 50px;
            border: 1px solid #E9E9E9;
        }
        td.orderItemProductInfo{
            text-align:left !important;
        }
        td.orderItemProductInfo img{
            height: 16px;
        }
        a.orderItemProductLink{
            color: #666666;
            display: block;
        }
        a.orderItemProductLink:hover{
            color: #666666;
            text-decoration: underline;
        }
        span.orderItemProductPrice, span.orderItemProductNumber{
            color: #000000;
        }
        span.orderItemUnitSum{
            color: #CC0000;
            font-weight: bold;
        }
        td.orderItemFirstTD, td.orderItemLastTD{
            border-bottom: 0px solid black !important;
        }
        label.orderItemDeliveryLabel{
            color: #666666;
            font-family: 宋体;
            font-size: 12px;
            font-weight: normal;
        }
        select.orderItemDeliverySelect{
            width: 100px;
            height: 23px;
        }
        div.orderItemSumDiv{
            padding: 20px;
            border-top: 2px solid #B4D0FF;
            background-color: #F2F6FF;
            height: 50px;
        }
        div.orderItemSumDiv span{
            color: #999999;
        }
        span.leaveMessageText{
            display: inline-block;
            margin-right: 10px;
            float: left;
        }
        div.orderItemTotalSumDiv{
            margin: 40px;
            height: 40px;
        }
        div.submitOrderDiv{
            height: 40px;
            margin: 20px 0px;
        }
        div.orderItemTotalSumDiv span{
            color: #999999;
        }
        span.orderItemTotalSumSpan{
            color: #C40000 !important;
            font-size: 22px;
            font-weight: bold;
            border-bottom: 1px dotted #F2F6FF;
        }
        button.submitOrderButton{
            border: 1px solid #C40000;
            background-color: #C40000;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            font-weight: 700;
            color: white;
            float: right;
            display:inline-block;
            margin:0px 10px;
            width:180px;
            height: 40px;
        }
        body{
            font-size: 12px;
            font-family: Arial;
        }
    </style>
</head>
<body>
<div class="buyPageDiv">
    <!--头部和收货地址-->
    <div class="buyFlow">
        <img src="http://how2j.cn/tmall/img/site/simpleLogo.png" class="pull-left">
        <img src="http://how2j.cn/tmall/img/site/buyflow.png" class="pull-right">
        <div style="clear:both"></div>
    </div>
    <div class="address">
        <div class="addressTip">输入收货地址</div>
        <div>
            <table class="addressTable">
                <tbody><tr>
                    <td class="firstColumn">详细地址<span class="redStar">*</span></td>
                    <td><textarea placeholder="建议您如实填写详细收货地址，例如接到名称，门牌好吗，楼层和房间号等信息" name="address"></textarea></td>
                </tr>
                <tr>
                    <td>邮政编码</td>
                    <td><input type="text" placeholder="如果您不清楚邮递区号，请填写000000" name="post"></td>
                </tr>
                <tr>
                    <td>收货人姓名<span class="redStar">*</span></td>
                    <td><input type="text" placeholder="长度不超过25个字符" name="receiver"></td>
                </tr>
                <tr>
                    <td>手机号码 <span class="redStar">*</span></td>
                    <td><input type="text" placeholder="请输入11位手机号码" name="mobile"></td>
                </tr>
                </tbody></table>
        </div>
    </div>

    <!--确认订单信息-->
    <div class="productList">
        <div class="productListTip">确认订单信息</div>
        <table class="productListTable">
            <thead>
            <tr>
                <th class="productListTableFirstColumn" colspan="2">
                    <img src="http://how2j.cn/tmall/img/site/tmallbuy.png" class="tmallbuy">
                    <a href="#nowhere" class="marketLink">店铺：天猫店铺</a>
                    <a href="#nowhere" class="wangwanglink"> <span class="wangwangGif"></span> </a>
                </th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>配送方式</th>
            </tr>
            <tr class="rowborder">
                <td colspan="2"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </thead>
            <tbody class="productListTableTbody">
            <tr class="orderItemTR">
                <td class="orderItemFirstTD"><img width="20px"  src="http://how2j.cn/tmall/img/productSingle_middle/4206.jpg" class="orderItemImg"></td>
                <td class="orderItemProductInfo">
                    <a class="orderItemProductLink" href="#nowhere">
                        Philips/飞利浦 HR1897/30破壁微榨原汁机 多功能家用果汁榨汁机
                    </a>
                    <img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
                    <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
                    <img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">
                </td>
                <td>
                    <span class="orderItemProductPrice">￥3,514.05</span>
                </td>
                <td>
                    <span class="orderItemProductNumber">2</span>
                </td>
                <td><span class="orderItemUnitSum">
                        ￥7,028.10
                        </span></td>
                <td class="orderItemLastTD" rowspan="5">
                    <label class="orderItemDeliveryLabel">
                        <input type="radio" checked="checked" value="">
                        普通配送
                    </label>
                    <select class="orderItemDeliverySelect">
                        <option>快递 免邮费</option>
                    </select>
                </td>
            </tr>
            <tr class="orderItemTR">
                <td class="orderItemFirstTD"><img width="20px"  src="http://how2j.cn/tmall/img/productSingle_middle/3796.jpg" class="orderItemImg"></td>
                <td class="orderItemProductInfo">
                    <a class="orderItemProductLink" href="#nowhere">
                        公众智能扫地机器人家用全自动电动清洁地毯擦拖地一体机吸尘器
                    </a>
                    <img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
                    <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
                    <img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">
                </td>
                <td>
                    <span class="orderItemProductPrice">￥2,124.15</span>
                </td>
                <td>
                    <span class="orderItemProductNumber">1</span>
                </td>
                <td><span class="orderItemUnitSum">
                        ￥2,124.15
                        </span></td>
            </tr>
            </tbody>
        </table>
        <div class="orderItemSumDiv">
            <div class="pull-left">
                <span class="leaveMessageText">给卖家留言:</span>
                <!--一个卖家留言的图片，点击后会被隐藏，且后面那个真正的textarea标签会显示出来-->
                <span>
                    <img src="http://how2j.cn/tmall/img/site/leaveMessage.png" class="leaveMessageImg">
                </span>
                <span class="leaveMessageTextareaSpan" style="display: none;">
                    <textarea class="leaveMessageTextarea" name="userMessage"></textarea>
                    <div>
                        <span>还可以输入200个字符</span>
                    </div>
                </span>
            </div>
            <span class="pull-right">店铺合计(含运费): ￥9,152.25</span>
        </div>
    </div>
    <div class="orderItemTotalSumDiv">
        <div class="pull-right">
            <span>实付款：</span>
            <span class="orderItemTotalSumSpan">￥9,152.25</span>
        </div>
    </div>
    <div class="submitOrderDiv">
        <button class="submitOrderButton" type="button">提交订单</button>
    </div>
</div>
</body>
<script>
    $(function () {
        $("img.leaveMessageImg").click(function () {
            $(this).hide();
            $("span.leaveMessageTextareaSpan").show();
            $("textarea.leaveMessageTextarea").css("height", "60px").css("width", "300px");
            $("textarea.leaveMessageTextarea").css("resize", "none");
//           $("textarea.leaveMessageTextarea").css("overflow", "scroll");
            $("div.orderItemSumDiv").css("height", "100px");
        });
    });
</script>
</html>